<template>
    <div class="register">
        <el-card>
            <div
                slot="header"
                class="clearfix"
            >
                <span>立即注册</span>
                <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click="toLogin"
                >已有账号？现在登录</el-button>
            </div>
            <el-form
                label-position="right"
                label-width="80px"
                :model="registerForm"
                :rules="registerRules"
                ref="registerForm"
                :status-icons="true"
            >
                <el-form-item
                    label="用户名"
                    prop="username"
                >
                    <el-input v-model="registerForm.username"></el-input><label style="color:red">&emsp;*请用邮箱注册</label>
                </el-form-item>
                <el-form-item
                    label="密码"
                    prop="password"
                >
                    <el-input
                        type="password"
                        v-model="registerForm.password"
                        show-password
                    ></el-input>
                    <el-tooltip
                        content=""
                        effect="light"
                        placement="right"
                    >
                        <div slot="content">
                            <p>长度为6-16个字符</p>
                            <p>不能包含空格</p>
                            <p>不能是9位以下纯数字</p>
                        </div>
                        <label>&emsp;查看密码规则</label>
                    </el-tooltip>
                </el-form-item>
                <el-form-item
                    label="确认密码"
                    prop="repassword"
                >
                    <el-input
                        type="password"
                        v-model="registerForm.repassword"
                        show-password
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="真实姓名"
                    prop="readName"
                >
                    <el-input v-model="registerForm.realName"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="registerForm.sex">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                    label="手机号码"
                    prop="tel"
                >
                    <el-input v-model="registerForm.tel"></el-input>
                </el-form-item>
                <el-form-item
                    label="所属单位"
                    prop="unit"
                >
                    <el-input v-model="registerForm.unit"></el-input>
                </el-form-item>
                <el-form-item
                    label="工作岗位"
                    prop="work"
                >
                    <el-input v-model="registerForm.work"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        @click="register"
                        type="primary"
                        style="width:50%; margin-left: 40px;"
                    >立即注册</el-button>
                </el-form-item>
            </el-form>
            <p style="color:red; text-align:center;">说明：注册并登录后方可得到技术支持（补丁更新、操作指南下载、免费软件试用三项需要登录，产品彩页与软件演示不需要登录）</p>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        // 自定义邮箱校验规则
        var checkMail = (rule, value, callback) => {
            var mailPattern = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (value === "") {
                return callback("用户名不能为空");
            } else if (!mailPattern.test(value)) {
                return callback("请输入正确的邮箱格式");
            } else {
                callback();
            }
        };

        // 自定义密码校验规则，然后在密码那里调用该规则
        var checkPassword = (rule, value, callback) => {
            var passwordPattern = /^\d{1,9}$/;
            if (value === "") {
                return callback(new Error("请输入密码!"));
            } else if (value.indexOf(" ") != -1) {
                return callback(new Error("不能包含空格"));
            } else if (value.length < 6 || value.length > 16) {
                return callback(new Error("长度在6-16之间"));
            } else if (passwordPattern.test(value)) {
                return callback(new Error("不能是9位以下纯数字"));
            } else {
                callback();
            }
        };
        // 定义确认密码的校验规则
        var checkRepassword = (rule, value, callback) => {
            if (value === "") {
                return callback(new Error("请输入确认密码！"));
            } else if (value != this.registerForm.password) {
                return callback(new Error("两次密码不一致"));
            } else {
                callback();
            }
        };
        // 定义手机号码校验规则
        var checkTel = (rule, value, callback) => {
            // 最新的手机号正则表达式
            var telPattern = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (value === "") {
                return callback(new Error("请输入手机号"));
            } else if (!telPattern.test(value)) {
                return callback(new Error("请输入正确的手机号"));
            } else {
                callback();
            }
        };
        return {
            registerStatus: true,
            registerForm: {
                username: "",
                password: "",
                repassword: "",
                realName: "",
                sex: "",
                tel: "",
                unit: "",
                work: ""
            },
            registerRules: {
                username: [
                    { required: true, message: "请输入邮箱", trigger: "blur" },
                    { validator: checkMail, trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { validator: checkPassword, trigger: "blur" }
                ],
                repassword: [
                    {
                        required: true,
                        message: "请输入确认密码",
                        trigger: "blur"
                    },
                    { validator: checkRepassword, trigger: "blur" }
                ],
                readName: [
                    {
                        required: true,
                        message: "请输入您的姓名",
                        trigger: "blur"
                    }
                ],
                tel: [
                    {
                        required: true,
                        message: "请输入手机号码",
                        trigger: "blur"
                    },
                    { validator: checkTel, trigger: "blur" }
                ],
                unit: [
                    {
                        required: true,
                        message: "请输入所属单位",
                        trigger: "blur"
                    }
                ],
                work: [
                    {
                        required: true,
                        message: "请输入工作岗位",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    methods: {
        // 点击注册提交身份信息
        register() {
            this.$prompt(
                "我们向您注册的邮箱中发送了验证码，请进入查看并输入",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消"
                }
            )
                .then(({ value }) => {
                    const loading = this.$loading({
                        lock: true,
                        text: "校验中",
                        spinner: "el-icon-loading"
                    });
                    // 向后台发送请求插入数据
                    this.$http({
                        headers: {
                            "Content-Type":
                                "application/x-www-form-urlencoded; charset=UTF-8"
                        },
                        method: "post",
                        url: "/user/insert",
                        params: this.registerForm
                    })
                        .then(response => {
                            loading.close();
                            if (response.data.success) {
                                // this.$message({message: response.data.message, type: "success"});
                                this.$alert(
                                    "注册成功，请返回首页登录",
                                    "提示",
                                    {
                                        confirmButtonText: "确定",
                                        callback: action => {
                                            this.$router.push("/first");
                                        }
                                    }
                                );
                            } else {
                                this.$message({
                                    message: response.data.message,
                                    type: "error"
                                });
                            }
                        })
                        .catch(err => err);
                    // setTimeout(() => {loading.close()}, 2000);
                })
                .catch(() => {
                    this.$message({ type: "info", message: "取消输入" });
                });
        },
        // 切换到登录窗口
        toLogin() {
            this.$router.push("/first").catch(err => err);
        },
        test() {
            console.log("aaa");
        }
    }
};
</script>

<style>
.register .el-card {
    margin: 0 auto;
    width: 50%;
}
.register .el-form {
    margin: 0 150px;
}
.register .el-form .el-form-item {
    margin-bottom: 20px;
}
.register .el-input {
    width: 60%;
}
</style>